<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const computedMatched = computed(() => {
  // 这里似乎没有过滤main组件，其实正是因为mian组建没有name，
  // 所以会恰巧过滤到main这个matched
  const matched = route.matched
    .filter((i) => Boolean(i.meta?.name))
    .map((i) => {
      const { meta, name, path } = i;
      return { meta, name, path };
    });
  return matched;
});
</script>
<template>
  <el-breadcrumb>
    <ElBreadcrumbItem
      v-for="item of computedMatched"
      :key="item.path"
      :to="{ name: item.name }"
    >
      <ElLink>{{ item.meta.name }}</ElLink>
    </ElBreadcrumbItem>
  </el-breadcrumb>
</template>
